<template>
  <div>
    <Table
        stripe
        :height="options.tableHeight"
        :columns="list.columns"
        :data="dealer.getSubInfoList"
        no-data-text="亲，没有找到相关记录哦！~">
    </Table>
    <Loader :status="list.status"></Loader>
    <DealerBindModalItem  ref="supplerBind" />
    <DealerUnbindModalItem @complete="getData" ref="dealerUnbind" />
  </div>
</template>
<script>
import listData from './SubInfoItemData'
import DealerBindModalItem from './DealerBindModalItem'
import DealerUnbindModalItem from './DealerUnbindModalItem'
import { mapState, mapGetters } from 'vuex'
export default {
  components: {
    DealerBindModalItem,
    DealerUnbindModalItem
  },
  data() {
    return {
      list: listData,
      options: {
        tableHeight: 800
      },
      distributorId: this.$route.query.distributorId
    }
  },
  mounted() {
    this.$bus.$on('onEdit', this.onEdit)
    this.$bus.$on('onBreak', this.onBreak)
    this.$bus.$on('onBind', this.onBind)
    this.$bus.$on('onSendId', this.onSendId)
    // if (this.distributorId) this.getData()
  },
  beforeDestroy() {
    this.$bus.$off()
  },
  methods: {
    onSendId(res) {
      this.distributorId = res.distributorDTO.id
      this.getData()
    },
    getData(distributorId) {
      this.list.status = 'loading'
      this.$store.dispatch('getSubInfo', {distributorId: this.distributorId || distributorId}).then(res => {
        this.list.status = 'pass'
      })
    },
    onEdit(row) {
      // 进入编辑页面
      this.$emit('complete', row, 1)
    },
    onBreak(row) {
      // 弹出解约弹窗
      this.$Modal.confirm({
        title: "修改",
        content: `确认将该经销商该品牌解约？`,
        onOk: () => {
          this.$ajaxPost('/distributor/contract/releaseContract', {
            distributorId: row.distributorId,
            distributorContractIds: [row.id]
          }).then(res => {
            this.$Message.info('解约成功')
            this.getData()
          })
        }
      });
    },
    onBind(row) {
      // 弹出绑定弹窗
      this.$Modal.confirm({
        title: "修改",
        content: `确认将该经销商该品牌解约？`,
        onOk: () => {
          this.$ajaxPost('/distributor/contract/releaseContract', {
            distributorId: this.row.distributorId,
            distributorContractIds: this.checkAllGroup
          }).then(res => {
            this.$Message.info('解约成功')
          })
        }
      });
    }
  },
  computed: {
    ...mapState([
      'dealer'
    ]),
    ...mapGetters([
      'basicForm'
    ])
  }
}
</script>